import React,{useState} from 'react'
import "./App.css"

import { nanoid } from 'nanoid'

import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
export default function App(){
  //状态提升，把数据放在App中
  // 初始化todoList数据
  const[todoList, setTodoList] =useState([
    {id: nanoid(), todo:"吃",done:false},
    {id: nanoid(), todo:"喝",done:false},
    {id: nanoid(), todo:"玩",done:false},
  ])

  return (
    <div className='todo-container'>
      <div className='todo-wrap'>
        <Header setTodoList={setTodoList} todoList={todoList}/>
        <List todoList={todoList} setTodoList={setTodoList}/>
        <Footer/>
      </div>
    </div>
  )
}
